<template>
  <div v-if="!item.hidden" >
    <template v-if="!item.hidden && item.menuType == 1">
      <el-menu-item :index="getRealPath(item.routePath)" @click="clickMenuItem(item.routePath)"
                    :class="{ 'submenu-title-noDropdown': !isNest }">
        <svg-icon :icon-class="item.icon || ''" v-show="item.icon" class="menu-title" />
        <template #title>
            <span class="menu-title" :title="hasTitle(item.name)">
              {{ item.name }}
            </span>
        </template>
      </el-menu-item>
    </template>

    <el-sub-menu v-else ref="subMenu" :index="getRealPath(item.routePath)" teleported>
      <template #title>
        <svg-icon :icon-class="item.icon || ''" v-show="item.icon" />
        <span class="menu-title" :title="hasTitle(item.name)">{{ item.name }}</span>
      </template>
      <sidebar-item
          v-for="(child, index) in item.children"
          :key="child.routePath + index"
          :is-nest="true"
          :item="child"
          class="nest-menu"
      />
    </el-sub-menu>
  </div>
</template>

<script setup lang="ts">
import AppLink from './Link.vue'
import {VAR_TAG} from "@/stores/conf";
import router from "@/router";

defineProps({
  item: {
    type: Object,
    required: true
  },
  isNest: {
    type: Boolean,
    default: false
  },
})

const clickMenuItem = (path: string) => {
  router.push({
    path: path
  })
}
const getRealPath = (path: any) => {
  return path.replace(VAR_TAG, '')
}

const hasTitle = (title: any) => {
  if (title.length > 1) {
    return title;
  } else {
    return "";
  }
}

</script>
